<template>
	<view>
		<view class="gardendetail">
			<image :src="activeFrom.image" style="width: 100%;height: 400rpx;;" mode=""></image>
		</view>

		<view class="content">
			<view class="active-experience">
				<view class="">{{activeFrom.title}}</view>
				<view class="">
					<view class="">农场活动</view>
					<view class="">
						<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/e6db820220923145428793.png" mode="">
						</image>
						<button open-type="share">123</button>
					</view>
				</view>

			</view>


			<view class="browse">
				<view class="">报名人数{{activeFrom.count}}</view>
			</view>
			
			<view class="active-list">
				<view class="active-left">
					<image src="http://www.szzn.group/uploads/20221107/a97e4b0bb296c4aa744a89a2223ac3b3.png" mode=""></image>
					<text>举办地址</text>
				</view>
				<view class="active-right">
					<view class="address">{{activeFrom.province+activeFrom.city+activeFrom.district+activeFrom.detail}}</view>
				</view>
			</view>
			
			<view class="active-list">
				<view class="active-left">
					<image src="http://www.szzn.group/uploads/20221107/08c1679f6335cc8813de13c31586e39e.png" mode=""></image>
					<text>举办时间</text>
				</view>
				<view class="active-right">
					<view class="time">{{activeFrom.signup_start_time | dateForma}} 至 {{activeFrom.signup_end_time | dateForma}}</view>
				</view>
			</view>
			
			<view class="active-list">
				<view class="active-left">
					<image src="http://www.szzn.group/uploads/20221107/f63b0218cba12a6ade6e42967524f26b.png" mode=""></image>
					<text>票卷价格</text>
				</view>
				<view class="active-right">
					<view class="">￥{{activeFrom.price}}</view>
				</view>
			</view>
			
			<view class="active-list">
				<view class="active-left">
					<image src="http://www.szzn.group/uploads/20221107/e6242bad4d8631a90d0f22828d0dce7c.png" mode=""></image>
					<text>咨询电话</text>
				</view>
				<view class="active-right">
					<view class="">{{activeFrom.phone}}</view>
				</view>
			</view>
			
			<view class="monitoring">
				<image src="http://www.szzn.group/uploads/20221107/260e77b313faca7b4b50dfd6deacca06.png" mode=""></image>
			</view>
			
			<view class="active-content">
				<view class="content-title">活动内容</view>
				<view class="content-text">
					<!-- <rich-text :nodes="ruls"></rich-text>
					<rich-text :nodes="content"></rich-text> -->
					<mp-html :content="details.activity_rules" />
					<mp-html :content="details.content" />
				</view>
			</view>
			
		</view>
		<view class="fooder">
			<view class="">
				<view class="">咨询</view>
				<view class="" @click="immediatelyMake">立即预约</view>
				<button open-type="contact">咨询</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {activeDetail} from '@/api/api.js'
	export default {
		data() {
			return {
				activeFrom:{},
				content:'',
				activeId:'',
				ruls:'',
				details:''
			}
		},
		// 分享
		onShareAppMessage() {
			return {
				title: this.activeFrom.title,
				path: 'page_home/agricultureactive/agricultureactive?id='+this.activeId
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: this.activeFrom.title,
				path: 'page_home/agricultureactive/agricultureactive?id='+this.activeId
			}
		},
		onLoad(options) {
			uni.showLoading({})
			this.activeId = options.id
			this.init(this.activeId)
		},
		methods: {
			init(id){
				let data = `id=${id}`;
				activeDetail(data).then(res=>{
					if(res.data.code == '200'){
						uni.hideLoading()
						this.activeFrom = res.data.data.activity
						this.details = res.data.data
						this.content = this.formatRichText(res.data.data.content)
						this.ruls = this.formatRichText(res.data.data.activity_rules)
					}else {
						uni.hideLoading()
						uni.showToast({
							title:res.data.msg,
							duration:1200,
							icon:'error'
						})
					}
					
				})
			},
			//解析富文本方法
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			},
			// 立即预约
			immediatelyMake(){
				uni.navigateTo({
					url:'/page_home/activemake/activemake?id='+this.activeId
				})
			}
		}
	}
</script>

<style lang="scss">
	.gardendetail {
		image {
			width: 100%;
		}
	}

	.content {
		padding: 20rpx;

		.active-experience {
			image {
				width: 60rpx;
				height: 60rpx;
			}

			display: flex;
			align-items: center;
			justify-content: start;

			>view:nth-child(1) {
				font-weight: 700;
				margin-right: 26rpx;
				font-size: 30rpx;
			}

			>view:nth-child(2) {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex: 1;

				>view:nth-child(1) {
					padding: 7rpx 12rpx;
					border-radius: 10rpx;
					background-color: #4eac60;
					color: #fff;
					font-size: 22rpx;
				}

				>view:nth-child(2) {
					position: relative;

					button {
						position: absolute;
						top: 0;
						right: 0;
						opacity: 0;

					}
				}
			}
		}

		.browse {
			padding: 30rpx 0;

			>view:nth-child(1) {
				font-size: 24rpx;
				color: #ccc;
			}

		}

		.servehome {
			>view:nth-child(1) {
				display: flex;
				align-items: center;
			}

			image {
				width: 150rpx;
				height: 60rpx;
				margin-right: 50rpx;
			}
		}

		.list {
			padding: 40rpx;

			.list-title {
				padding: 15rpx 0;
				font-weight: 700;
			}
		}
	}

	.fooder {
		position: fixed;
		bottom: 0;
		height: 120rpx;
		width: 100%;
		background-color: #fff;
		font-size: 24rpx;
		button {
			// padding: 0 !important;
			margin: 0 !important;
			position: absolute;
			width: 220rpx;
			opacity: 0;
		}
		>view {
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			>view:nth-child(1) {
				padding: 25rpx 80rpx;
				border-radius: 50px;
				background-color: #ebf2ed;
				color: #53c074;
			}

			>view:nth-child(2) {
				padding: 25rpx 100rpx;
				border-radius: 50px;
				background-color: #289958;
				color: #fff;
			}
		}
	}
	.active-list {
		display: flex;
		margin-bottom: 20rpx;
		align-items: center;
		justify-content: space-between;
	}
	.active-left {
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
			vertical-align: middle;
		}
		font-size: 30rpx;
	}
	.active-right {
		.address {
			width: 480rpx;
			text-align: right;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		font-size: 28rpx;
	}
	.monitoring{
		box-shadow: 1px 1px 8px 2px #ccc;
		border-radius: 20rpx;
		image {
			width: 100%;
			height: 220rpx;
			border-radius: 20rpx;
		}
	}
	.active-content {
		margin-top: 20rpx;
		padding: 20rpx 20rpx 60rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 1px 1px 8px 2px #ccc;
		.content-title {
			font-weight: 700;
			font-size: 30rpx;
		}
		.content-text {
			padding: 10rpx 0;
			// text-indent:64rpx;
			// line-height:1.6;
			font-size: 28rpx;
		}
	}
 
</style>
